import styled from 'styled-components'
import { Environment } from '@/utils'
import ErrImg from '@img/error_icon.png'
import shareArrow from '@img/shareArrow.png'
const isMobile = Environment.isMobile
export const ShareViewStyle = styled.div`
	width: ${isMobile ? '100%' : '600px'};
	display: flex;
	flex-direction: column;
	margin: 0px auto;
	color: #4e4e4e;
	font-size: 12px;
	/* background-color: whitesmoke; */
	padding: ${isMobile ? '0px 20px' : '0px 100px'};
	box-sizing: border-box;
	.top_title {
		font-size: 18px;
		font-weight: bold;
		height: 20px;
		/* background: lightblue; */
		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;
		/* background-color: red; */
		margin-top: ${isMobile ? '50px' : '68px'};
		margin-bottom: 22px;
	}
`
export const FuncStyle = styled.div`
	width: 100%;
	display: flex;
	flex-direction: column;
	margin: 0px auto;
	justify-content: center;
	align-items: center;
	a {
		text-decoration: none;
	}
	& > * {
		margin-bottom: 20px;
	}
	.enter_tips {
		height: 14px;
		display: flex;
		justify-content: center;
		align-items: center;
		color: #b6b6b6;
		.download {
			color: #007ac0;
			text-decoration: underline;
		}
	}
	img {
		margin: 30px 0px 14px 0px;
		/* border: 1px #ececec solid; */
		width: 146px;
		height: 146px;
	}
`
export const FormWrapStyle = styled.div`
	width: 100%;
	display: flex;
	flex-direction: column;
	color: #616060;
	/* background-color: lightblue; */
	margin-bottom: ${isMobile ? '15px' : '38px'};
	font-size: 14px;
`
export const FormItemStyle = styled.div`
	width: 100%;
	display: flex;
	flex-direction: row;
	color: #616060;
	align-items: flex-start;
	justify-content: center;
	line-height: 36px;
`
export const FormTitleStyle = styled.div`
	width: 100px;
	display: flex;
	flex-direction: column;
	color: #616060;
	align-items: flex-start;
	justify-content: center;
	font-weight: bold;
`
export const FormContentStyle = styled.div`
	flex: 1;
	display: flex;
	flex-direction: row;
	color: #616060;
	align-items: center;
	justify-content: flex-start;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	.copy {
		height: 30px;
		width: 30px;
		margin: 2px;
		display: inline-block;
		margin-left: 20px;
		background: url();
		background-repeat: no-repeat;
		&:hover {
			background-position-x: -30px;
			cursor: pointer;
		}
	}
`
export const ErrorStyle = styled.div`
	display: flex;
	flex-direction: column;
	width: 100%;
	.err_icon_line {
		display: flex;
		justify-content: center;
		margin-top: ${isMobile ? '106px' : '206px'};
		.err_icon {
			width: 100px;
			height: 100px;
			background: url(${ErrImg}) no-repeat;
			justify-content: center;
		}
	}
	.err_msg {
		font-size: 16px;
		color: #4e4e4e;
		margin-top: ${isMobile ? '20px' : '60px'};
		height: 30px;
		display: flex;
		justify-content: center;
		align-items: center;
	}
`
export const MaskContainerStyle = styled.div`
	width: 100%;
	height: 100%;
	position: fixed;
	.mask {
		width: 100%;
		height: 100%;
		background: #000;
		opacity: 0.5;
	}
	.top-tips {
		width: 44px;
		height: 54px;
		position: fixed;
		right: 40px;
		top: 40px;
		background-size: contain;
		background-image: url(${shareArrow});
		/* border: 1px whitesmoke solid; */
	}
	.top-tips-message {
		width: 234px;
		position: fixed;
		right: 58px;
		top: 102px;
		background-color: white;
		border-radius: 4px;
		padding: 16px;
		/* display: flex; */
		/* justify-content: center;
        align-items: center; */
		color: #4e4e4e;
		box-shadow: 0px 0px 7px #000;
		box-sizing: border-box;
	}
	.top-tips-message p {
		padding: 0;
		margin: 0;
		font-size: 14px;
		text-align: left;
		/* background-color: wheat; */
		margin-top: 5px;
	}
`
